import React, { Component } from 'react'
import { NavBar, Icon , SearchBar} from 'antd-mobile';
import "./index.css"

export default class index extends Component {
    state = {
        value : '输入商品名'
    }

    render() {
        return (
             <section>
                 {/* 导航栏 */}
                  <NavBar
                    leftContent={<Icon key="0" type="left"/>}
                   >搜索中心</NavBar>

                  {/* 搜索栏 */}
                  <SearchBar
                    value={this.state.value}
                    placeholder="Search"
                    onSubmit={value => console.log(value, 'onSubmit')}  //按下enter键的时候触发
                    onClear={value => console.log(value, 'onClear')}    //清除输入内容的时候触发
                    onFocus={() => console.log('onFocus')}              //获取焦点的时候触发
                    onBlur={() => console.log('onBlur')}                //失去焦点的时候触发
                    onCancel={() => console.log('onCancel')}            //取消的时候触发
                    showCancelButton
                    cancelText="搜索"                                   //按钮的内容
                    onChange={this.onChange}                            //改变内容的时候触发
                  />

             </section>
        )
    }
}
